<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>split_p_content102_fromOthers</title>
    <style>
		p {
		  word-break: break-all;
		  white-space: pre-line;
		}
    </style>
    <!-- <script type="text/javascript" charset="utf-8" src="../third-party/jquery-1.10.2.min.js"></script> -->
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<p id="p1">asdfabcd1234zxcvzxcv5679你的；了看见爱上；kjhewqar了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；暗示法发你的；了看见离asdgfsdfgsdfg爱上；的开飞机撒</p>
<p id="w1"></p>
<p id="p2">asdfabcd1234zxcvzxcv5679你的；了看见爱上；kjhewqar了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；暗示法发你的；了看见离asdgfsdfgsdfg爱上；的开飞机撒</p>
<p id="w2"></p>
<p id="p3">asdfabcd1234zxcvzxcv5679你的；了看见爱上；kjhewqar了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；了看见爱上；kjhewqar暗示法发你的；了看见离asdgfsdfgsdfg爱上；暗示法发你的；了看见离asdgfsdfgsdfg爱上；的开飞机撒</p>
<p id="w3"></p>

<script>
void function main1() {
  const p = document.getElementById('p1');
  const w = document.getElementById('w1');
  const text = p1.textContent;
  w.textContent = text.charAt(0);
  const lineHeight = w.clientHeight;
  for (var i = 1; w.clientHeight < 2 * lineHeight && i < text.length; ++i) {
    w.insertAdjacentText('beforeend', text.charAt(i));
  }
  w.textContent = "第 ${i} 个字符：${text[i]}";
}();
void function main2() {
  const p = document.getElementById('p2');
  const w = document.getElementById('w2');
  const text = p.textContent;
  w.textContent = text.charAt(0);
  const lineHeight = w.clientHeight;
  w.innerHTML = text.split('').map(c => "<span>${c}</span>").join('');
  const clientRect = w.getBoundingClientRect();
  const span = document.elementFromPoint(clientRect.left + 1, clientRect.top + lineHeight + 1);
  for (var i = 1; w.children[i] !== span && i < text.length; ++i);
  w.textContent = "第 ${i} 个字符：${text[i]}";
}();
function caretPositionFromPoint(x, y) {
  var range;
  var textNode;
  var offset;

  if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(x, y);
    textNode = range.offsetNode;
    offset = range.offset;
  } else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(x, y);
    textNode = range.startContainer;
    offset = range.startOffset;
  }
  return { textNode, offset };
}
void function main3() {
  const p = document.getElementById('p3');
  const w = document.getElementById('w3');
  const text = p.textContent;
  w.textContent = text.charAt(0);
  const lineHeight = w.clientHeight;
  const clientRect = p.getBoundingClientRect();
  const pos = caretPositionFromPoint(clientRect.left + 1, clientRect.top + lineHeight * 1.1);
  w.textContent = `第 ${pos.offset} 个字符：${text.charAt(pos.offset)}`;
}();
</script>

</body>
</html>
